<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>新增备份</title>
    <link rel="stylesheet" th:href="@{/css/base.css}" media="all">
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all">
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <script type="text/javascript" th:src="@{/js/jquery-3.2.0.min.js}"></script>
    <script type="text/javascript" th:src="@{/js/base.js}"></script>
    <style>
        body {
            overflow-y: auto;
            margin: 0 0 15px 0;
        }
    </style>
</head>
<body>
<div class="layuimini-container">
    <div class="layuimini-main">
        <div class="layui-carousel" id="stepForm" lay-filter="stepForm" style="margin: 10px auto 0 auto">
            <div carousel-item>
                <div class="step1">
                    <form class="layui-form" style="margin: 0 auto; max-width: 500px; padding-top: 40px" lay-filter="form1">
                        <div class="layui-form layuimini-form">
                            <input type="hidden" name="id" th:value="${data.id}">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">分区</label>
                                <div class="layui-input-block">
                                    <input type="text" name="zoneName" placeholder="请输入" class="layui-input" readonly>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">实例</label>
                                <div class="layui-input-block">
                                    <input type="text" name="name" placeholder="请输入" class="layui-input" readonly>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">连接驱动</label>
                                <div class="layui-input-block">
                                    <input type="text" name="className" placeholder="请输入" class="layui-input" readonly>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">主机</label>
                                <div class="layui-input-block">
                                    <input type="text" name="host" placeholder="请输入" class="layui-input" readonly>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">端口</label>
                                <div class="layui-input-block">
                                    <input type="text" name="port" placeholder="请输入" class="layui-input" readonly>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">用户</label>
                                <div class="layui-input-block">
                                    <input type="text" name="username" placeholder="请输入" class="layui-input" readonly>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">密码</label>
                                <div class="layui-input-block">
                                    <input type="password" name="password" placeholder="请输入" class="layui-input" readonly>
                                </div>
                            </div>
                            <div class="layui-form-item connect-box hidden">
                                <div class="layui-input-block">
                                    <div style="display: flex; align-items: center">
                                        <span style="display: flex; align-items: center; font-size: 20px; color: #1890ff;" class="hidden connect-success">
                                            <p>连接成功</p>
                                            <i class="layui-icon" style="color: #1890ff;font-size: 24px; margin-left: 5px">&#xe6af;</i>
                                        </span>
                                        <span style="display: flex; align-items: center; font-size: 20px; color: #FF5722; margin-left: 15px" class="hidden connect-error">
                                            <p>连接失败</p>
                                            <i class="layui-icon" style="color: #FF5722; font-size: 24px; margin-left: 5px">&#xe69c;</i>
                                        </span>
                                    </div>
                                    <!-- 提示信息 -->
                                    <div class="connect-error-text" style="color: #FF5722; margin-top: 15px">

                                    </div>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-sm layui-btn-normal layui-connect" lay-submit lay-filter="connectBtn">
                                        &emsp;测试连接&emsp;
                                    </button>
                                    <button class="step1-next layui-btn layui-btn-sm layui-btn-disabled" disabled="disabled" lay-submit lay-filter="formStep">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="step2">
                    <form class="layui-form" style="margin: 0 auto; max-width: 500px; padding-top: 40px" lay-filter="form2">
                        <div class="layui-form layuimini-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">数据库</label>
                                <div class="layui-input-block">
                                    <select name="database" id="database" lay-verify="required" lay-filter="database" lay-search>
                                        <option value="" selected>请选择</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">备份范围</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="backupType" value="0" title="全库备份" checked lay-filter="backupType">
                                    <input type="radio" name="backupType" value="1" title="单表备份" lay-filter="backupType">
                                </div>
                            </div>
                            <div class="layui-form-item tables">
                                <label class="layui-form-label">数据表</label>
                                <div class="layui-input-block tables-div" style="max-height: 500px; overflow-y: auto; display: flex; flex-direction: column; align-items: flex-start">
                                    <span style="color: #999999; line-height: 36px">暂无数据</span>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-sm layui-btn-primary pre">
                                        &emsp;上一步&emsp;
                                    </button>
                                    <button class="layui-btn layui-btn-sm" lay-submit lay-filter="formStep">
                                        &emsp;下一步&emsp;
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="step3">
                    <form class="layui-form" style="margin: 0 auto; max-width: 500px; padding-top: 40px" lay-filter="form3">
                        <div class="layui-form layuimini-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label required">导出方式</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="structure" title="表结构" checked>
                                    <input type="checkbox" name="data" title="表数据" checked>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">备份方式</label>
                                <div class="layui-input-block">
                                    <input type="radio" name="categoryEnum" value="MANUAL" title="立即备份" checked lay-filter="categoryEnum">
                                    <input type="radio" name="categoryEnum" value="AUTO" title="定时备份" lay-filter="categoryEnum">
                                </div>
                            </div>
                            <div class="layui-form-item hidden auto-backup">
                                <label class="layui-form-label required">cron</label>
                                <div class="layui-input-block">
                                    <input type="text" name="cron" placeholder="请输入，示例：0 0 1 * * ?" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item hidden auto-backup">
                                <label class="layui-form-label required">是否启动</label>
                                <div class="layui-input-block">
                                    <input type="checkbox" name="status" lay-text="是|否" lay-skin="switch" value="1">
                                </div>
                            </div>
                            <div class="layui-form-item hidden auto-backup">
                                <label class="layui-form-label">备注</label>
                                <div class="layui-input-block">
                                    <textarea name="remark" placeholder="请输入" class="layui-input" style="resize: none; min-height: 100px"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">是否压缩</label>
                                <div class="layui-input-block" style="display: flex; align-items: center">
                                    <input type="checkbox" name="isCompress" lay-text="是|否" lay-skin="switch" value="true">
                                    <tip>将被压缩成zip格式的文件，提升备份速度</tip>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">是否上传</label>
                                <div class="layui-input-block" style="display: flex; align-items: center">
                                    <input type="checkbox" name="isUpload" lay-text="是|否" lay-skin="switch" value="true" lay-filter="isUpload">
                                    <tip>将上传至文件服务器</tip>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <label class="layui-form-label required">是否删除</label>
                                <div class="layui-input-block" style="display: flex; align-items: center">
                                    <input type="checkbox" name="isDelete" lay-text="是|否" lay-skin="switch" value="true" lay-filter="isDelete">
                                    <tip>将删除磁盘上的备份文件，取决于是否开启上传</tip>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn layui-btn-sm layui-btn-primary pre">
                                        &emsp;上一步&emsp;
                                    </button>
                                    <button class="layui-btn layui-btn-sm layui-btn-normal backup-btn" lay-submit lay-filter="saveBtn">
                                        &emsp;提交&emsp;
                                    </button>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="step4">
                    <div style="text-align: center;margin-top: 90px;">
                        <i class="layui-icon layui-circle"
                           style="color: white;font-size:30px;font-weight:bold;background: #1890ff;padding: 20px;line-height: 80px;">&#xe605;</i>
                        <div style="font-size: 24px;color: #333;font-weight: 500;margin-top: 30px;">
                            备份成功
                        </div>
                        <div style="font-size: 14px;color: #666;margin-top: 20px;">请在备份记录中查看</div>
                    </div>
                    <div style="text-align: center;margin-top: 50px;">
                        <button class="layui-btn repeat-backup">&emsp;重新备份&emsp;</button>
                        <button class="layui-btn layui-btn-primary close-page">&emsp;关闭&emsp;</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:inline="javascript">

    layui.config({
        base: ctxPath + 'layui/modules/'
    }).extend({
        step: 'step/step'
    });

    layui.use(['form', 'layer', 'step'], function () {
        const form = layui.form,
            layer = layui.layer,
            step = layui.step;

        // 渲染分布表单
        step.render({
            elem: '#stepForm',
            filter: 'stepForm',
            width: '100%',
            height: '750px',
            stepWidth: '750px',
            stepItems: [{
                title: '实例信息'
            }, {
                title: '数据库信息'
            }, {
                title: '备份参数'
            }, {
                title: '完成'
            }]
        });

        // 下一步
        form.on('submit(formStep)', function (data) {
            // 第二步
            if (2 === currentStep) {
                let form2 = form.val("form2");
                if (1 == form2.backupType) {
                    let tables = [];
                    // 获取选中的表格
                    $('.tables-div input[type=checkbox]:checked').each(function () {
                        tables.push($(this).val());
                    });
                    if (0 == tables.length) {
                        layer.msg('请选择需要备份的数据表', {icon: 2})
                        return false
                    }
                }
            }
            step.next('#stepForm');
            currentStep++;
            return false;
        });

        // 上一步
        $('.pre').click(function () {
            step.pre('#stepForm');
            currentStep--;
            return false;
        })

        // 初始化赋值
        form.val("form1", [[${data}]]);

        // 当前库名
        let currentDatabase = '';
        // 当前备份类型
        let currentType = '';
        // 当前步骤
        let currentStep = 1;

        // 测试连接
        form.on('submit(connectBtn)', function (res) {
            const data = res.field;
            // 提交后台
            Asurplus.post({
                url: ctxPath + 'node-info/connect',
                data: JSON.stringify(data)
            }, (res) => {
                // 连接成功
                layer.msg(res.msg, {icon: 1});
                $('.connect-success').removeClass('hidden');
                $('.connect-box').removeClass('hidden');
                $('.connect-error').addClass('hidden');
                $('.layui-connect').addClass('hidden');
                $('.step1-next').removeClass('layui-btn-disabled');
                $('.step1-next').removeAttr('disabled');
                $('.connect-error-text').addClass('hidden');
                // 查询数据库名
                Asurplus.post({
                    url: ctxPath + 'node-info/listDatabases',
                    data: JSON.stringify(data)
                }, (res) => {
                    let database = res.data;
                    if (0 < database.length) {
                        $('#database').html('<option value="" selected>请选择</option>');
                        for (let i = 0, len = database.length; i < len; i++) {
                            $("#database").append('<option value="' + database[i] + '">' + database[i] + '</option>');
                        }
                        form.render("select");
                    }
                })
            }, (res) => {
                // 连接失败
                $('.connect-box').removeClass('hidden');
                $('.connect-success').addClass('hidden');
                $('.connect-error').removeClass('hidden');
                $('.connect-error-text').text('连接失败：' + res.msg);
            });
            return false;
        });

        // 数据库选择
        form.on('select(database)', function (data) {
            let value = data.value;
            currentDatabase = value;
            if (value) {
                if(1 == currentType) {
                    // 获取表信息
                    let properties = [[${data}]];
                    properties.database = currentDatabase;
                    Asurplus.post({
                        url: ctxPath + 'node-info/listTables',
                        data: JSON.stringify(properties)
                    }, (res) => {
                        let tables = res.data;
                        if (0 < tables.length) {
                            $('.tables-div').html('');
                            for (let i = 0, len = tables.length; i < len; i++) {
                                $('.tables-div').append('<input type="checkbox" value="' + tables[i] + '" title="' + tables[i] + '">');
                            }
                            form.render("checkbox");
                        }
                    })
                }
            } else {
                $('.tables-div').html('');
            }
        })

        // 备份类型选择
        form.on('radio(backupType)', function (data) {
            let value = data.value;
            currentType = value;
            // 全库备份
            if(0 == value) {
                $('.tables-div').html('<span style="color: #999999; line-height: 36px">暂无数据</span>');
            }
            // 单表备份
            else if(1 == value && currentDatabase){
                // 获取表信息
                let properties = [[${data}]];
                properties.database = currentDatabase;
                Asurplus.post({
                    url: ctxPath + 'node-info/listTables',
                    data: JSON.stringify(properties)
                }, (res) => {
                    let tables = res.data;
                    if (0 < tables.length) {
                        $('.tables-div').html('');
                        for (let i = 0, len = tables.length; i < len; i++) {
                            $('.tables-div').append('<input type="checkbox" value="' + tables[i] + '" title="' + tables[i] + '">');
                        }
                        form.render("checkbox");
                    }
                })
            }
        })

        // 备份方式选择
        form.on('radio(categoryEnum)', function (data) {
            let value = data.value;
            // 自动备份
            if('AUTO' == value){
                $('.auto-backup').removeClass('hidden');
            }
            // 手动备份
            else {
                $('.auto-backup').addClass('hidden');
            }
        })

        // 是否上传选择
        form.on('switch(isUpload)', function (data) {
            let value = form.val('form3').isUpload
            if (!value) {
                value = false
            }
            form.val('form3', {
                'isDelete': value
            })
            form.render(null, 'isDelete');
        })

        // 监听提交
        form.on('submit(saveBtn)', function (res) {
            const data = res.field;
            // 表单2
            let form2 = form.val("form2");
            for (let i in form2) {
                data[i] = form2[i]
            }
            // 表单3
            let form3 = form.val("form3");
            for (let i in form3) {
                data[i] = form3[i]
            }
            // 数据库连接信息id
            let properties = [[${data}]];
            data.nodeId = properties.id;
            if (!data.database) {
                layer.msg('请选择需要备份的数据库', {icon: 2})
                return false
            }
            // 单表备份
            if (1 == data.backupType) {
                let tables = [];
                // 获取选中的表格
                $('.tables-div input[type=checkbox]:checked').each(function () {
                    tables.push($(this).val());
                });
                if (0 == tables.length) {
                    layer.msg('请选择需要备份的数据表', {icon: 2})
                    return false
                }
                data.tables = tables
            }
            // 自动备份
            if('AUTO' == data.categoryEnum && !data.cron) {
                layer.msg('请输入cron表达式', {icon: 2})
                return false
            }
            // 启动状态
            if(1 == data.status) {
                data.status = true
            }
            else {
                data.status = false
            }
            // 是否压缩
            if(!data.isCompress) {
                data.isCompress = false
            }
            // 是否上传
            if(!data.isUpload) {
                data.isUpload = false
            }
            // 是否删除
            if(!data.isDelete) {
                data.isDelete = false
            }
            // 导出方式
            if(!data.structure && !data.data) {
                layer.msg('请至少选择一种导出方式', {icon: 2})
                return false
            }
            // 表结构
            if(data.structure) {
                if(!data.data) {
                    data.dataType = 0
                }
            }
            // 表数据
            else {
                data.dataType = 1
            }
            // 请求备份
            Asurplus.post({
                url: ctxPath + 'node-info/saveBackUp',
                data: JSON.stringify(data)
            }, (res) => {
                step.next('#stepForm');
            })
            return false;
        });

        $('.repeat-backup').click(function () {
            location.reload();
        })

        $('.close-page').click(function () {
            const windowIndex = parent.layer.getFrameIndex(window.name);
            parent.layer.close(windowIndex);
        })
    });
</script>
</body>
</html>
